<style lang="scss">
.page-wall {
  --shadow-base: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  .item {
    border-radius: 4px;
    box-shadow: var(--shadow-base);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .item > * + * {
    margin-top: 0.25rem;
  }
}
</style>

<template>
  <div class="page-wall">

<!--    {{items}}-->
   <z-space vertical>
     <div>
       <z-masonry-wall :items="items" :ssr-columns="1" :column-width="300" :gap="16">
         <template #default="{ item, index }">
           <div
               class="item"
               :class="{ secondary: index % 2 === 0, accent: index % 2 === 1 }"
               :style="`height: ${item.height};`"
           >
             <h1>{{ item.title }}</h1>
             <span>{{ item.description }}</span>
           </div>
         </template>
       </z-masonry-wall>
     </div>
     <div>
       <el-button @click="addRandom">添加随机</el-button>
     </div>
   </z-space>

  </div>
</template>

<script>
function Arr(len) {
  return new Array(len).fill()
}

export default {
  data() {
    return {
      items: [
      ]
    }
  },
  mounted() {
    this.addRandom()
  },
  methods: {
    addRandom() {
      let len = ZY.lodash.random(0,10);
      let arr = Arr(len).map(() => {
        let height = ZY.lodash.random(100,200)
        return {
          title: ZY.rid(6),
          description:  ZY.rid(20),
          height: height  + 'px'
        }
      });
      this.items = this.items.concat(arr)
    }
  }
}
</script>
